<template>
    <div>
        <r-query-form :form="form" :items="items" @search="search"></r-query-form>
        <div class="btn-panel">
            <el-button size="small" type="success" icon="el-icon-delete" @click="pass">审批通过</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="reject">审批拒绝</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="del">删除</el-button>
        </div>
        <r-table ref="mutipleTable" :tableData="tableData" :tableCols="tableCols">
          <template slot="slot_status" slot-scope="scope">
            <el-tag v-if="scope.data.status==0" size="mini" >待审批</el-tag>
            <el-tag v-if="scope.data.status==1" type="success" size="mini" >审批通过</el-tag>
            <el-tag v-if="scope.data.status==2" type="danger" size="mini" >审批拒绝</el-tag>
          </template>
        </r-table>
        <r-pagination :page="page" :total="total" @handleCurrentChange="handleCurrentChange"></r-pagination>
    </div>
</template>

<script>
    import {query,del,updateSelective} from "@/api/company";
    import RTable from "@/components/RTable";
    import RPagination from "@/components/RPagination";
    import {message} from "@/utils/message";
    import RQueryForm from "@/components/RQueryForm";
    export default {
        name: "Company",
        components:{RQueryForm, RPagination,RTable},
        data(){
            return{
                total:0,
                page:1,
                tableData:[],
                tableCols:[
                    {prop:'id', label:'ID', width:80},
                    {prop:'name', label:'名称'},
                    {prop:'type', label:'类型'},
                    {prop:'contact', label:'联系人'},
                    {prop:'telephone', label:'联系电话'},
                    {prop:'email', label:'邮箱'},
                    {prop:'addr', label:'地址'},
                    {prop:'size', label:'规模'},
                    {prop:'status', label:'状态',slot:'slot_status'},
                ],
                form:{
                    name:'',
                    contact:''
                },
                items:[
                    {type:'text',label:'名称',name:'name',placeholder:'按关键字查询'},
                    {type:'text',label:'联系人',name:'contact',placeholder:'按关键字查询'},
                ],
            }
        },
        mounted() {
            this.list({})
        },
        methods:{
            handleCurrentChange(val){
                this.page = val;
                let params = this.form;
                params.page = this.page
                this.list(params);
            },
            search(){
                this.list(this.form);
            },
            list(params){
                query(params).then(res=>{
                    this.tableData = res.data;
                    this.total = res.total;
                })
            },
            del(){
                let selection = this.$refs['mutipleTable'].selection;
                if(selection.length>0){
                    this.$confirm('确定要删除吗','删除提示').then(()=>{
                        let arr = selection.map(item=>item.id);
                        let ids = arr.join(',');
                        del(ids).then(res=>{
                            message.success(res.msg);
                            this.search()
                        })
                    }).catch(()=>{})
                }else{
                    message.warning('请选择要删除的数据')
                }
            },
            pass(){
              let selection = this.$refs['mutipleTable'].selection;
              console.log(selection)
              if(selection.length == 1){
                updateSelective({"id":selection[0].id,"status":1}).then(res=>{
                  message.success(res.msg);
                  this.search()
                })
              }else{
                message.warning('请选择一条数据审批')
              }
            },
            reject(){
              let selection = this.$refs['mutipleTable'].selection;
              if(selection.length == 1){
                updateSelective({"id":selection[0].id,"status":2}).then(res=>{
                  message.success(res.msg);
                  this.search()
                })
              }else{
                message.warning('请选择一条数据审批')
              }
            }
        }
    }
</script>

<style scoped>

</style>